<template>
	<view class="form-container">
		<view class="form-item">
			<label class="label">姓名</label>
			<input v-model="form.tenantName" type="text" placeholder="请输入" class="input" disabled />
		</view>
		<view class="form-item">
			<label class="label">身份证号码</label>
			<input v-model="form.tenantIdCard" type="text" placeholder="请输入" class="input" disabled />
		</view>
		<view class="form-item">
			<label class="label">手机号</label>
			<input v-model="form.tenantPhone" type="number" placeholder="请输入" class="input" />
		</view>
		<view class="form-item">
			<label class="label">家庭住址</label>
			<view @tap="chooseLocation">{{ form.tenantAddress==undefined?"请选择":form.tenantAddress }}</view>
		</view>
		<view class="example-body">
			<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" @change="change" />
		</view>	
	</view>
	<button type="primary" @tap="submit">提交</button>
</template>

<script setup lang="ts">
import { useMemberStore } from '../../stores';
import { ref } from 'vue';
import { startSignup } from '../../services/signup';
import { onLoad } from '@dcloudio/uni-app';
import { ContractDTO } from '../../types/contract';

const memberStore = useMemberStore();
const form = ref<ContractDTO>({});
onLoad((option) => {
		
	form.value.tenantName = memberStore.profile.userInfo.realName
	form.value.tenantIdCard = memberStore.profile.userInfo.idCard
	form.value.contractId = option.contractId


});
const range = ref()
const maskClick = (e) => {
	console.log(e);
	console.log(range.value);

}
const change = (rangeDate) => {
	form.value.startDate = rangeDate[0]
	form.value.endDate = rangeDate[1]

}
const chooseLocation = () => {
	uni.chooseLocation({
	success: function (res) {
	
		form.value.tenantAddress=res.address

	}
});

}
const submit = () => {

	console.log(form.value);
	if (form.value?.tenantName == undefined || form.value.tenantIdCard == undefined) {
		uni.showModal({
			title: '请先进行实名认证',
			icon: 'none',
			success: (success) => {
				if (success.confirm) {
					uni.navigateTo({
						url: '/pages/authentication/authentication'
					});
				}
			},
		}
		);
		return
		
	}
	// 这里进行表单验证逻辑
	// if (!form.value.tenantPhone || !form.value.tenantAddress || !form.value.startDate || !form.value.endDate) {
	// 	uni.showToast({
	// 		title: '请完善信息',
	// 		icon: 'none'
	// 	});
	// 	return

	// }
	startSignup(form.value).then((res) => {
		if (res.code == 200) {
			uni.showToast({
				title: '提交成功',
				icon: 'success'
			});
			uni.navigateTo({
				url: "/pages/prompt/prompt?msg=提交成功"
			});
		}


	})
	// 如果验证通过，则执行提交操作

};
</script>

<style scoped>
.form-container {
	padding: 20rpx;
}

.form-item {
	margin-bottom: 20rpx;
}

.label {
	display: block;
	margin-bottom: 10rpx;
}

.input {
	width: 100%;
	height: 80rpx;
	padding: 0 20rpx;
	border-radius: 8rpx;
	background-color: #f5f5f5;
}

.uploader {
	display: flex;
	flex-wrap: wrap;
	gap: 10rpx;
}

.upload-button {
	width: 100rpx;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f5f5f5;
	border-radius: 8rpx;
}

.submit-button {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	color: #fff;
	background-color: #1aad19;
	border-radius: 8rpx;
	margin-top: 20rpx;
}
</style>